<%@ page import="com.pijunn.label.Label" %>
<%@ page import="com.pijunn.common.enums.AveryLabelSize" %>

<!DOCTYPE html>
<html>
	<head>
		<meta name="layout" content="main">
		<g:set var="entityName" value="${message(code: 'label.labels', default: 'Labels')}" />
		<title><g:message code="default.print.label" args="[entityName]" /></title>
		<style type="text/css" media="screen">
			body #label-container {
		        width: 8.5in;
		        margin: 0in .1875in;
		        border: 1px solid green;
		        background-color: lightyellow;
		        float: left;
		        }
		    .label{
		        /* Avery 5160 labels -- CSS and HTML by MM at Boulder Information Services */
		        width: 2.025in; /* plus .6 inches from padding */
		        height: .875in; /* plus .125 inches from padding */
		        padding: .125in .3in 0;
		        margin-right: .125in; /* the gutter */
		
		        float: left;
		
		        text-align: center;
		        overflow: hidden;
		
		        outline: 1px dotted; /* outline doesn't occupy space like border does */
		        background-color: #fff;
		        }
		  	.print-image {
		  		display: none;
		  	}
		  	#layout-control {
		  		padding: 10px 25px;
		  		margin: 5px;
		  	}
		  	input {
		  		width: 50px;
		  	}
		  	body #print-label p {
		  		margin: 0 20px;
		  		font-weight: bold;
		  	}
		</style>
		<style type="text/css" media="print">
			body {
		        width: 100%;
		        margin: 0;
				box-shadow: none;
			}
		    body {
		        width: 8.5in;
		        margin: 0in .1875in;
		        }
			body aside,
			body header,
			body .small_banner,
			body .nav,
			body #print-label h1,
			body #print-label p,
			body #layout-control,
			body .footer {
				display: none;
			}
		    .label{
		        /* Avery 5160 labels -- CSS and HTML by MM at Boulder Information Services */
		        width: 2.025in; /* plus .6 inches from padding */
		        height: .875in; /* plus .125 inches from padding */
		        padding: .125in .3in 0;
		        margin-right: .125in; /* the gutter */
		
		        float: left;
		
		        text-align: center;
		        overflow: hidden;
		
		        outline: 1px dotted; /* outline doesn't occupy space like border does */
		        background-color: #fff;
		        }
		    .page-break  {
		        clear: left;
		        display:block;
		        page-break-after:always;
		        }
		  	.print-image {
		  		display: block;
		  		height: 90%;
		  		position: relative;
		  		margin: auto;
		  	}
		  	.label .label-display {
		  		position: relative;
		  		top: -0.35in;
		  		background-image: none;
		  		padding: 0.05in;
		  		line-height: 1em;
		  		margin: auto;
		  	}
		  	body div {
		  		border: none;
		  		margin: 0;
		  		padding: 0;
		  	}
		</style>
	</head>
	<body>
		<a href="#edit-labeledItem" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
		<div class="nav" role="navigation">
			<ul>
				<li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
				<li><g:link class="create" action="create"><g:message code="print.register.label" /></g:link></li>
			</ul>
		</div>
		<div id="print-label" class="content scaffold-edit" role="main">
			<h1><g:message code="default.print.label" args="[entityName]" /></h1>
			<g:if test="${flash.message}">
			<div class="message" role="status">${flash.message}</div>
			</g:if>
			<g:hasErrors bean="${cmd}">
			<ul class="errors" role="alert">
				<g:eachError bean="${cmd}" var="error">
				<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
				</g:eachError>
			</ul>
			</g:hasErrors>
			
			<p><g:message code="print.label.instructions" default="Printing Instructions go here"/></p>
			
			<div id="layout-control">
				<fieldset>
					<label for="labelType"></label><g:message code="print.label.type" default="Avery Label Type:" />
					<select id="labelType">
						<g:each in="${ sizes }" var="size">
							<option value="${size.width}:${size.height}">${ size }</option>
						</g:each>
					</select>
					<label for="labelWidth"></label><g:message code="print.label.type" default="Label Width:" />
					<input id="labelWidth" type="text">
					<label for="labelType"></label><g:message code="print.label.type" default="Label Height:" />
					<input id="labelHeight" type="text">
					<a id="print" href="#">Print Labels</a>
				</fieldset>
			</div>

			<div id="label-container">
				<g:each in="${labels}" var="label" status="idx">
					<div class="label">
						<img class="print-image" src="${createLinkTo(dir: 'images', file: 'pijunnLabelPrint.png')}"/>
						<div class="label-display">${label?.serialNumber}</div>
					</div>
				</g:each>
			</div>
		</div>
	</body>
	<g:javascript>
	$(function(){
	
		var padding = [.6, .125];
		var selection = $('#labelType').val().split(':');
		$('#labelWidth').val(selection[0]).blur(function(){
			var width = parseFloat($(this).val()) - padding[0];
			$('div.label').css('width', width+'in');
		});
		$('#labelHeight').val(selection[1]).blur(function(){
			var height = parseFloat($(this).val()) - padding[1];
			var size = height / (1.0 - padding[1]);
			$('div.label').css('height', height+'in').css({'line-height': size+'em', 'font-size': size+'em'});
		});;
		
		$('#labelType').change(function(){
			var selection = $(this).val().split(':');
			$('#labelWidth').val(selection[0]).blur();
			$('#labelHeight').val(selection[1]).blur();
		});
		
		$('#print').button()
		.click(function() {
			window.print();
		});
		
	});
	</g:javascript>
</html>
